html, body{
  --primary-color: #409EFF;
  --success-color: #67C23A;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
  --info-color: #909399;
  --warning-color2:#FFD700FF;
  --border-color: #DCDFE6;
  --border-color2:#E4E7ED;
  --border-color3: #EBEEF5;
  --font-color: #303133;
  --font-color2: #606266;
  --font-color3: #909399;
  --placeholder-color: #C0C4CC;
  --bg-color: #EBEEF5;
  --font-size: 12px;
}
$primary-color: var(--primary-color);
$success-color: var(--success-color);
$warning-color: var(--warning-color);
$danger-color: var(--danger-color);
$info-color: var(--info-color);
$warning-color2: var(--warning-color2);
$border-color: var(--border-color);
$border-color2: var(--border-color2);
$border-color3: var(--border-color3);
$font-color: var(--font-color);
$font-color2: var(--font-color2);
$font-color3: var(--font-color3);
$placeholder-color: var(--placeholder-color);
$bg-color: var(--bg-color);
$font-size: var(--font-size);

@mixin prev-arrow{
  content:"";
  width: 8px;
  height: 8px;
  border-left: 1px solid $font-color;
  border-top: 1px solid $font-color;
  transform: rotate(-45deg);
  &:hover{
    border-color: $font-color2;
  }
  &:visited{
    border-color: $font-color3;
  }
}
@mixin next-arrow{
  content:"";
  width: 8px;
  height: 8px;
  border-right: 1px solid $font-color;
  border-bottom: 1px solid $font-color;
  transform: rotate(-45deg);
  &:hover{
    border-right: 1px solid $font-color2;
    border-bottom: 1px solid $font-color2;
  }
  &:visited{
    border-color: $font-color3;
  }
}
@mixin prev-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 30px;
  text-align: right;
  border: 1px solid $font-color2;
  border-radius: 2px 0 0 2px;
  cursor: pointer;
  &:after{
    @include prev-arrow
  }
  &:hover{
    background-color: $border-color3;
  }
  &:active{
    background-color: $border-color2;
  }
}
@mixin next-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 30px;
  text-align: left;
  border: 1px solid $font-color2;
  border-radius: 0 2px 2px 0;
  cursor: pointer;
  &:after{
    @include next-arrow
  }
  &:hover{
    background-color: $border-color3;
  }
  &:active{
    background-color: $border-color2;
  }
}
